<template>
  <view class="page">
    <block v-if="isLoadingFinish">
      <image
        :lazy-load="true"
        class="bg"
        :src="imgBaseUrlV0 + 'maintenance-record-bg.png'"
        mode="aspectFill"
      ></image>
      <view class="main">
        <view class="title" v-if="dataForm.name">
          <text class="chn">{{ dataForm.name }}</text>
          <text class="en">lubricating oil record</text>
        </view>
        <view class="maintenance-view" v-if="dataList && dataList.length">
          <view
            class="maintenance-record-group"
            v-for="(record, recordIndex) in dataList"
            :key="record.id"
          >
            <view class="info" @click="onToggleFold(record, recordIndex)">
              <view class="check-date-view">
                <image
                  :lazy-load="true"
                  class="check-date-icon"
                  :src="imgBaseUrlV0 + 'maintenance-check-date.png'"
                  mode="widthFix"
                ></image>
                <text class="check-date">{{ record.time }}</text>
                <text v-if="record.warning_num">
                  <text class="status-error"
                    >{{ record.warning_num }}项异常</text
                  >
                </text>
                <text v-else class="status-normal">正常</text>
              </view>
              <u-icon
                class="fold-icon"
                name="arrow-up"
                size="28"
                color="838383"
                v-if="record.fold"
              ></u-icon>
              <u-icon
                class="fold-icon"
                name="arrow-down"
                size="28"
                color="838383"
                v-else
              ></u-icon>
            </view>
            <view class="maintenance-records" v-if="!record.fold">
              <text v-if="!record.list">无数据</text>
              <view
                class="maintenance-record"
                v-for="(info, idx) in record.list"
                :key="idx"
                @click="openAlert(info)"
              >
                <text class="title">{{ info.name }}</text>
                <text
                  class="value"
                  :class="[info.is_warning ? 'red' : 'green']"
                >
                  {{ info.value }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="maintenance-view">
          <view class="maintenance-record-group">
            <view class="info">
              <view class="check-date-view">
                <view class="tips"> 暂无记录 </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view
        class="bottom-view"
        v-if="dataList.length >= total && !isLoadingFinish"
      >
        <button class="btn" type="default" size="mini" @click="loadMore">
          加载更多
        </button>
      </view>
    </block>

    <popup-loading ref="popup"></popup-loading>
    <u-modal
      v-model="showAlert"
      title="提示"
      :content="alertContent"
      :show-cancel-button="true"
      :cancel-text="'关闭'"
      :confirm-text="'立即维保'"
      @confirm="openPage('/pageA/service/apply/index')"
    ></u-modal>
    <!-- @confirm="openPage('/pages/service-application/service-application')" -->
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import { getDateTime } from "@/common/util.js";
import { getEquipmentOperationRecords2 } from "@/common/api/equipment-operation-record.js";
import popupLoading from "@/components/public/loading/popup";
import { delayFunc } from "@/common/util";
import noData from "@/components/public/noData/noData";
import { imgBaseUrl, imgBaseUrlV0, imgBaseUrlV1 } from "@/common/config";
export default {
  mixins: [viewModule],
  components: {
    popupLoading,
    noData,
  },
  data() {
    return {
      imgBaseUrlV0,
      imgBaseUrlV1,
      listQuery: {
        search: null,
        page: 1,
        sort: {
          id: "",
        },
        equipmentId: null,
      },
      isLoadingFinish: false,
      showAlert: false,
      alertContent: "",
      mixinViewOptions: {
        getURL: "/device/deviceOilRecord",
        isPage: true,
        isShowLoading: false,
        reachBottom: true,
        createdIsNeed: false,
        pullDown: true,
      },
    };
  },
  async onLoad(e) {
    let id = (this.dataForm.id = e.equipmentId);
    uni.setNavigationBarTitle({
      title: (e.name ? e.name + "的" : "") + "润滑油记录",
    });
    if (!id) return;
    this.$nextTick(async () => {
      this.open();
      this.getDataList();
    });
  },
  computed: {},
  methods: {
    getDateTime,
    fetchComplete(err, data = []) {
      this.close();
      this.mixinViewOptions.isShowLoading = true;
      if (err) return [];
      console.log(data, "?data");
      data.forEach((i) => (i.fold = false));
    },
    async loadMore() {
      this.page++;
      this.getDataList();
    },
    open() {
      this._time = +new Date();
      this.$refs.popup && this.$refs.popup.open();
    },
    async close() {
      let now = +new Date();
      let time = this._time;
      let t = now - time;
      if (t <= 1000 * 0.5) {
        await delayFunc(500 - t);
      }
      this.isLoadingFinish = true;
      this.$refs.popup && this.$refs.popup.close();
    },
    onToggleFold(e, index) {
      console.log(e, "?e", arguments);
      if (!e && typeof index != "number") return;
      if (!e) {
        e = this.dataList[index];
      }
      e.fold = !e.fold;
    },
    openAlert(item) {
      if (item.is_warning) {
        this.showAlert = true;
        this.alertContent = `${item.warning_msg} (${item.key})`;
      }
    },
    openPage(path) {
      this.$Router.push({
        path,
        query: {
          equipmentId: this.dataForm.id,
          isEquipment: 1,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.page {
  min-height: calc(100vh - var(--window-top));
  background-color: #3f7dff;

  position: relative;
}

.bg {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  z-index: 2;

  .title {
    padding-top: 50rpx;
    padding-bottom: 30rpx;
    text-align: center;

    .chn {
      display: block;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 70rpx;
      color: #fff;
    }
    .en {
      display: block;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #889dbf;
    }
  }

  .maintenance-view {
    padding: 30rpx;
  }
  .maintenance-record-group {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }
    .info {
      display: flex;
      flex-direction: row;

      .check-date-view {
        flex: 1;

        .check-date-icon {
          width: 50rpx;
          vertical-align: middle;
        }
        .check-date {
          padding: 0 20rpx;
          font-size: 30rpx;
          font-weight: 700;
          color: #434343;
        }
        .status-normal,
        .status-error {
          display: inline-block;
          font-size: 24rpx;
          padding: 0 10rpx;
          margin-left: 5rpx;
          border: 3rpx solid #000;
          border-radius: 20rpx;
          border-bottom-left-radius: 0;
        }
        .status-normal {
          border-color: #6cca92;
          color: #6cca92;
        }
        .status-error {
          border-color: #f56e56;
          color: #f56e56;
        }
      }
      .fold-icon {
        vertical-align: middle;
      }
    }
    .maintenance-records {
      padding: 20rpx 0;

      .maintenance-record {
        padding: 20rpx;
        padding-left: 30rpx;
        font-size: 28rpx;
        font-weight: 700;
        background-color: #e8edf4;
        color: #636363;
        border-radius: 5rpx;
        margin-bottom: 10rpx;
        position: relative;
        overflow: hidden;

        &:last-child {
          margin-bottom: 0;
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          width: 8rpx;
          height: 30rpx;
          margin-top: -15rpx;
          border-radius: 5rpx;
          background-color: #3bbcba;
        }
        .title {
          // flex: 1;
          line-height: 40rpx;
        }
        .value {
          float: right;
          line-height: 40rpx;
        }
      }
    }
  }
}

.bottom-view {
  // background-color: #fff;
  // padding-top: 30rpx;
  // position: fixed;
  // bottom: 0;
  // left: 0;
  // height: 140rpx;
  width: 100%;
  z-index: 2;
  text-align: center;

  position: relative;
  padding: 20rpx 10rpx;
  display: flex;

  .btn {
    width: 60%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    background-color: #184388;
    color: #fff;

    flex: 1;
    margin: 0 20rpx;
  }
}
</style>